<template>
<!-- 产品详情 -->
  <div class="container">
    <div class="left">
      <div class="actor">
        <img :src="actorC" />
        <div
          ref="animPart"
          class="anim-part"
          :class="{ 'anim-cart': isCart, 'anim-order': isOrder }"
        >
          <img :src="actorC" />
        </div>
      </div>
      <ul class="thumbnail-list">
        <li
          class="thumbnail-item"
          v-for="(thumbnail, index) in thumbnails"
          :key="index"
          @mouseover="toggleActor(index)"
        >
          <img class="thumbnail" :src="thumbnail" />
        </li>
      </ul>
    </div>
    <div class="right">
      <h2>{{ item.text }}</h2>
      <div class="banner-price">
        <p class="params-item">
          <span class="params-label">价格</span>
          <span class="price-delete">￥{{ item.price }}</span>
        </p>
        <p>
          <span class="params-label">促销价</span>
          <span class="price-strong">￥{{ item.onlinePrice }}</span>
        </p>
      </div>
      <div class="banner-params">
        <p class="params-item">
          <span class="params-label">发货地</span>{{ item.address }}
        </p>
        <p class="params-item">
          <span class="params-label">快递方式</span>{{ item.type }}
        </p>
      </div>
      <div class="banner-quantity">
        <input
          class="ipt-quantity"
          v-model="quantity"
          type="number"
          min="1"
          @keyup="checkQuantity"
        />
      </div>
      <div class="banner-operate">
        <span class="btn-operate btn-buy" @click="addInOrder"> 立即购买 </span>
        <span class="btn-operate btn-cart" @click="addInCart">
          <i class="fa fa-shopping-cart"></i>
          &nbsp;加入购物车
        </span>
        <div class="btn-operate d1" @click="addInCollect">收藏</div>
      </div>
      <br />
      <div class="banner-state">
        <p class="params-item">
          <span class="params-label">服务承诺</span>
          <span class="params-label deep-gray">正品保证</span>
          <span class="params-label deep-gray">极速退款</span>
          <span class="params-label deep-gray">赠运费险</span>
          <span class="params-label deep-gray">七天无理由退换</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/config/config";
export default {
  name: "Goods",
  data() {
    return {
      actorIndex: 0,
      quantity: 1,
      isCart: false,
      isOrder: false,
      cart: [],
      order: [],
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.getStore();
      this.$refs.animPart.addEventListener("animtioned", () => {
        this.isCart = false;
        this.isOrder = false;
      });
    });
  },
  computed: {
    item() {
      return config.goods.find((item) => item.name === this.$route.query.name);
    },
    thumbnails() {
      return this.item.thumbnails;
    },
    actorC() {
      return this.item.images[this.actorIndex];
    },
    result() {
      return {
        cover: this.item.cover,
        text: this.item.text,
        type: this.item.type,
        price: this.item.onlinePrice,
        quantity: this.quantity,
      };
    },
  },
  methods: {
    getStore() {
      let gsStore = window.localStorage.getItem("gsStore");
      if (gsStore) {
        gsStore = JSON.parse(gsStore);
        this.cart = gsStore.cart || [];
        this.order = gsStore.order || [];
      }
    },
    setStore() {
      let gsStore = {
        cart: this.cart,
        order: this.order,
      };
      window.localStorage.setItem("gsStore", JSON.stringify(gsStore));
    },
    toggleActor(index) {
      this.actorIndex = index;
    },
    checkQuantity() {
      if (this.quantity < 1 || isNaN(this.quantity)) {
        this.quantity = 1;
      }
    },
    addInCart() {
      this.isCart = true;
      this.cart.push(this.result);
      this.setStore();
    },
    addInOrder() {
      this.isOrder = true;
      this.order.push(this.result);
      this.setStore;
    },
    addInCollect() {
      this.isCollect = true;
      this.collect.push(this.result);
      this.setStore();
    },
  },
}
</script>

<style scoped>
.d1{
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background: url();
}
.colles {
  width: 24px;
  height: 20px;
  top: 7px;
  left: 8px;
  background: url(https://m.kaolacdn.com/goods/dist/m/img/producticon.b67ad86.png)
    no-repeat -174px -172px;
  background-size: 200px;
}
.container {
  width: 1120px;
  margin-left: auto;
  margin-right: auto;
  height: 500px;
}
.left {
  padding-top: 50px;
  width: 50%;
  float: left;
}
.actor {
  position: relative;
  text-align: center;
}
.thumbnail-list {
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 430px;
  list-style: none;
}
.thumbnail-item {
  display: inline-block;
  width: 20%;
  cursor: pointer;
}
.thumbnail {
  border: 1px solid transparent;
  box-sizing: border-box;
}
.thumbnail:hover {
  border-color: rgba(0, 0, 0, 0.2);
}
.right {
  padding-top: 50px;
  overflow: hidden;
}
.banner-price,
.banner-params,
.banner-quantity,
.banner-operate,
.banner-state {
  padding: 5px 12px;
  margin-top: 18px;
}
.banner-price {
  margin-right: 80px;
  color: #333;
  background-color: #e9e9e9;
}
.price-delete {
  text-decoration: line-through;
}
.price-strong {
  font-weight: 600;
  font-size: 24px;
  color: #ff0036;
}
.params-item {
  line-height: 24px;
}
.params-label {
  display: inline-block;
  min-width: 75px;
  color: #999;
  font-size: 12px;
}
.ipt-quantity {
  width: 120px;
  padding-left: 10px;
  line-height: 32px;
  outline: none;
  border: 1px solid #ccc;
}
.btn-operate {
  width: 200px;
  display: inline-block;
  cursor: pointer;
  line-height: 36px;
  text-align: center;
  border: 1px solid #95bf47;
  user-select: none;
}
.btn-cart {
  color: #fff;
  background-color: #95bf47;
}
.btn-buy {
  color: #95bf47;
  background-color: rgba(149, 191, 103, 0.1);
}
.deep-gray {
  color: #777;
}
.anim-part {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
.anim-cart {
  animation-duration: 500ms;
  animation-name: addInCart;
  animation-timing-function: ease-in-out;
}
.anim-order {
  animation-duration: 500ms;
  animation-name: addInOrder;
  animation-timing-function: ease-in-out;
}
.anim-collect {
  animation-duration: 500ms;
  animation-name: addInCollect;
  animation-timing-function: ease-in-out;
}
@keyframes addInCart {
  0% {
    transform: scale(1);
  }
  100% {
    transform: translateX(680px) translateY(-380px) scale(0.01);
  }
}
@keyframes addInOrder {
  0% {
    transform: scale(1);
  }
  100% {
    transform: translateX(620px) translateY(-380px) scale(0.01);
  }
}
@keyframes addInCollect {
  0% {
    transform: scale(1);
  }
  100% {
    transform: translateX(620px) translateY(-380px) scale(0.01);
  }
}
</style>
